<template>
  <div>
    <MyTable :list="list">
      <!-- 语法2：接受作用域插槽的值 -->
      <!-- <template v-slot:插槽的名字="对象"></template> -->
      <template #default="obj">
        <button @click="del(obj)">删除</button>
      </template>
    </MyTable>
    <MyTable :list="list2">
      <!-- 插槽接受值的时候 可以直接进行解构 -->
      <template #default="{ item }">
        <button @click="look(item)">查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ],
    }
  },
  methods: {
    del(obj) {
      this.list = this.list.filter((item) => item.id !== obj.item.id)
    },
    look(item) {
      // console.log(obj)
      alert(`id:${item.id},姓名：${item.name},年龄:${item.age}`)
    },
  },
  components: {
    MyTable,
  },
}
</script>